﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">

<head>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Title -->
    <title>Rapid - A Responsive WordPress Blog Theme</title>

    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">

    <!-- Font awesome CSS -->
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">

    <!-- Animate CSS -->
    <link rel="stylesheet" href="/static/css/animate.min.css">

    <!-- OwlCarousel CSS -->
    <link rel="stylesheet" href="/static/css/owl.carousel.css">

    <!-- SlickNav CSS -->
    <link rel="stylesheet" href="/static/css/slicknav.min.css">

    <!-- Magnific popup CSS -->
    <link rel="stylesheet" href="/static/css/magnific-popup.css">

    <!-- Main CSS -->
    <link rel="stylesheet" href="/static/css/style.css">

    <!-- Responsive CSS -->
    <link rel="stylesheet" href="/static/css/responsive.css">

</head>
<body>





<!-- Header Area Start -->
<section class="rapid-header-area ">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="site-logo">
                    <a href="index.jsp">
                        <img src="/static/img/logo.png" alt="site logo" />
                    </a>
                    <p>A responsive html blog template</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Header Area End -->



<!-- Mainmenu Area Start -->
<section class="rapid-mainmenu-area">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-9 col-sm-9">
                        <!-- Responsive Menu -->
                        <div class="rapid-responsive-menu"></div>
                        <!-- Responsive Menu -->
                        <div class="mainmenu">
                            <nav>
                                <ul id="rapid_navigation">
                                    <li class="current-page-item"><a href="index.jsp">home</a></li>
                                    <li><a href="page.html">about</a></li>
                                    <li>
                                        <a href="#">category</a>
                                        <ul>
                                            <li><a href="category-lifestyle.html"> life style</a></li>
                                            <li><a href="category-travel.html">travel</a></li>
                                            <li><a href="category-fashion.html">fashion</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#">feature</a>
                                        <ul>
                                            <li><a href="standard-post.html"> Standard</a></li>
                                            <li><a href="gallery-post.html">Gallery</a></li>
                                            <li><a href="music-post.html">music</a></li>
                                            <li><a href="Video-post.html">Video</a></li>
                                            <li><a href="link-post.html">Link</a></li>
                                            <li><a href="404.html">404 page</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="contact.html">contact</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-3">
                        <div class="rapid-search-bar">
                            <form>
                                <input placeholder="Search..." type="search">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Mainmenu Area End -->



<!-- Slider Post Area Start -->
<section class="rapid-slider-post-area">
    <div class="post-slider">
        <c:forEach items="${hotBlogList}" var="blog">
            <div class="single-post-slide">
                <a href="/blog/getBlogDetailPage?id=${blog.id}">
                    <img width="634px" height="356px" src="/pic/${blog.image}" alt="post slider" />
                    <div class="post-slider-content">
                        <div class="category-links">
                            <a href="#">life style</a>
                        </div>
                        <h2><a href="#">${blog.title}a></h2>
                        <div class="post-meta">
                            <ul>
                                <li>Jan 20, 2018</li>
                                <li><a href="#">Admin</a></li>
                            </ul>
                        </div>
                    </div>
                </a>

            </div>
        </c:forEach>


    </div>
</section>
<!-- Slider Post Area End -->



<!-- Allpost Area Start -->
<section class="rapid-Allpost-area section_50">
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <div class="blog-page-left">
                    <c:forEach items="${blogList}" var="blog">
                        <div class="single-blog">
                            <%--<div class="blog-image">
                                <a href="#">
                                    <img width="848px" height="424px" src="/pic/${blog.image}" alt="blog" />
                                </a>
                            </div>--%>
                            <div class="blog-text">
                                <div class="post-cat">
                                    <p>Life style</p>
                                </div>
                                <h2><a href="#">${blog.title}</a></h2>
                                <div class="blog-meta">
                                    <ul>
                                        <li>-: Jan 20, 2018 </li>
                                        <li><a href="#">admin</a></li>
                                        <li><a href="#">6 <i class="fa fa-comments-o"></i></a></li>
                                    </ul>
                                </div>
                                <div class="post-content" style="height:200px;white-space:nowrap;overflow: hidden;text-overflow:ellipsis">
                                    <p>${blog.content}</p>
                                </div>
                                <a href="/blog/getBlogDetailPage?id=${blog.id}" class="rapid-btn">read more</a>
                                <div class="share-button-social">
                                    <a href="#"><i class="fa fa-facebook"></i></a>
                                    <a href="#"><i class="fa fa-twitter"></i></a>
                                    <a href="#"><i class="fa fa-google-plus"></i></a>
                                </div>
                            </div>
                        </div>
                    </c:forEach>

                </div>
                <div class="pagination_box">
                    <ul class="pagination">
                        <li><a href="#"><i class="fa fa-angle-left"></i></a></li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#"><i class="fa fa-angle-right"></i></a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-3">
                <div class="blog-page-right margin-top">
                    <div class="blog-sidebar-widget">
                        <div class="about-us-widget">
                            <div class="about-widget-image">
                                <a href="#">
                                    <img src="/static/img/about.jpeg.jpg" alt="about image" />
                                </a>
                            </div>
                            <div class="about-widget-text">
                                <h3>Photographer & Blogger</h3>
                                <p>Etiam nulla nunc, aliquet vel metus nechan, scelerisque tempus enim. Sed eget blandit lectus donec facilisis.</p>
                            </div>
                        </div>
                    </div>
                    <div class="blog-sidebar-widget">
                        <ul class="social_links">
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                        </ul>
                    </div>
                    <div class="blog-sidebar-widget">
                        <h3>Newsletter</h3>
                        <form>
                            <input type="search" placeholder="Email Address" >
                            <button type="submit"><i class="fa fa-search"></i></button>
                        </form>
                    </div>
                    <div class="blog-sidebar-widget">
                        <h3>by Categories</h3>
                        <ul class="blog-categories">
                            <li><a href="#"> life style</a></li>
                            <li><a href="#">travel</a></li>
                            <li><a href="#">fashion</a></li>
                            <li><a href="#">video</a></li>
                            <li><a href="#">music</a></li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>
<!-- Allpost Area End -->




<!-- Footer Area Start -->
<footer class="rapid-footer-area">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="footer-left">
                    <p>Copyright © 2018 Rapid. All rights reserved.</p>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- Footer Area End -->





<!-- jQuery -->
<script src="static/js/jquery.min.js"></script>

<!-- Bootstrap JS -->
<script src="static/js/bootstrap.min.js"></script>

<!-- Magnific Popup JS -->
<script src="static/js/jquery.magnific-popup.min.js"></script>

<!-- OwlCarousel JS -->
<script src="static/js/owl.carousel.min.js"></script>

<!-- SlickNav JS -->
<script src="static/js/jquery.slicknav.min.js"></script>

<!-- Custom JS -->
<script src="static/js/custom.js"></script>

</body>
</html>
